	<template>
		<view>
			<view>
				<uni-card>
					<view style="position: relative;">
						<image class="waitImg" :src="waiturl"></image>
						<text class="title">待装车</text>
					</view>
					<view class="line"></view>
					<text class="driverInfo">运单编号:</text>
					<text class="driverInfo">YD2023062057298&nbsp;&nbsp;|</text>
					<text class="driverInfo" style="margin-left: 10px;">复制</text><br>
					<text class="driverInfo">司机姓名:</text>
					<text class="driverInfo">芦建兵</text><br>
					<text class="driverInfo">车牌号:</text>
					<text class="driverInfo">晋A00001</text>
				</uni-card>
			</view>
			<view>
				<uni-card>
					<view>
						<text class="titleleft">货源</text>
						<view class="selectInfo">
							<view class="titleright">
								<image class="gotoImg" :src="gotourl"></image>
							</view>
							<text class="righttitle">详情</text>
						</view>
					</view>
					<view class="line"></view>
					<view class="load-location">
						<view class="load-car">
							<image class="load-car-img" :src="loadurl"></image>
							<text class="load-title">gg-侯村乡龙角山龙城森林公园</text>
							<image class="dituImg" :src="dituurl"></image><br />
							<view class="load-text">
								<text class="load-text">山西省太原市阳曲县侯村乡龙城森岭公园</text>
							</view>
						</view>
						<view class="load-car">
							<image class="load-car-img" :src="unloadurl"></image>
							<text class="load-title">郭志华-龙城公园</text>
							<image class="dituImg" :src="dituurl"></image><br />
							<view class="load-text">
								<text class="load-text">山西省太原市杏花岭区中间涧河镇232县道龙城公园</text>
							</view>
						</view>
					</view>
				</uni-card>
			</view>
			<view>
				<uni-card>
					<text class="titleleft">运价</text>
					<view class="line"></view>
					<text class="driverInfo">运价:</text>
					<text class="price">{{price}}元/吨</text><br>
					<text class="driverInfo">邮费:</text>
					<text class="youprice">{{youprice}}元</text>
					<text class="beizhu">亏0.00吨(含)不扣费,超出部分每0.1吨(含)扣0.00元</text>
				</uni-card>
			</view>
			<view>
				<uni-card>
					<text class="titleleft">异常上报</text>
					<view class="selectInfo">
						<view class="titleright">
							<image class="gotoImg" :src="gotourl"></image>
						</view>
						<text class="righttitle">详情</text>
					</view>
				</uni-card>
			</view>

			<view>
				<uni-card>
					<text class="titleleft">运输</text>
					<view class="line"></view>

					<view class="step pd-top10">
						<image class="carsize1" src="../../../static/purseimg/完成.png"></image>
						<view class="stepRight">

							<text class="text1">卸车</text><text class="text2"
								style="margin-left: 10px;">2023-06-2009:29:08</text>
							<view class="abcd">
								<uni-collapse :accordion="true" class="borde1">
									<text class="text">卸车毛重:47.00吨</text>
									<text class="text">卸车净重:32.00吨</text>
								</uni-collapse>
								<image class="carsize" src="../../../static/purseimg/银行卡.png"></image>
							</view>



						</view>
					</view>

					<view class="step pd-top10">
						<image class="carsize1" src="../../../static/purseimg/完成.png"></image>
						<view class="stepRight">

							<text class="text1">进站</text><text class="text2"
								style="margin-left: 10px;">2023-06-2009:29:08</text>
							<view class="abcd">
								<view class="text"></view>
							</view>
						</view>
					</view>

					<view class="step pd-top10">
						<image class="carsize1" src="../../../static/purseimg/完成.png"></image>
						<view class="stepRight">

							<text class="text1">装车确认</text><text class="text2"
								style="margin-left: 10px;">2023-06-2009:29:08</text>
							<view class="abcd">
								<view class="text"></view>
							</view>


						</view>
					</view>

					<view class="step pd-top10">
						<image class="carsize1" src="../../../static/purseimg/完成.png"></image>
						<view class="stepRight">

							<text class="text1">矿发</text><text class="text2"
								style="margin-left: 10px;">2023-06-2009:29:08</text>
							<view class="abcd">
								<uni-collapse :accordion="true" class="borde1">
									<text class="text">卸车毛重:47.00吨</text>
									<text class="text">卸车净重:32.00吨</text>
								</uni-collapse>
								<image class="carsize" src="../../../static/purseimg/银行卡.png"></image>
							</view>



						</view>
					</view>

					<view class="step pd-top10">
						<image class="carsize1" src="../../../static/purseimg/完成.png"></image>
						<view class="stepRight">

							<text class="text1">到达装车地</text><text class="text2"
								style="margin-left: 10px;">2023-06-2009:29:08</text>
							<view class="abcd">
								<view class="text"></view>
							</view>



						</view>
					</view>

					<view class="step pd-top10">
						<image class="carsize1" src="../../../static/purseimg/完成.png"></image>
						<view class="stepRight">

							<text class="text1">抢单</text><text class="text2"
								style="margin-left: 10px;">2023-06-2009:29:08</text>

						</view>
					</view>

				</uni-card>

			</view>

			<view>
				<uni-card>
					<text class="titleleft">重量</text>
					<text class="righttitle1">单位:吨</text>
					<view class="line"></view>
					<text class="driverInfo">装车毛/皮/净:</text>
					<text class="youprice">{{price}}/{{price}}/{{price}}</text><br>
					<text class="driverInfo">卸车车毛/皮/净:</text>
					<text class="youprice">{{price}}/{{price}}/{{price}}</text>
					<br>
					<text class="driverInfo">亏吨:</text>
					<text class="price">{{youprice}}</text>
				</uni-card>
			</view>

			<view>
				<uni-card>
					<text class="titleleft">账单</text>
					<text class="righttitle1">单位:元</text>
					<view class="line"></view>
					<text class="driverInfo">总运费:</text>
					<text class="price1">{{price}}</text><br>
					<text class="driverInfo">信息费:</text>
					<text class="youprice">{{youprice}}</text><br>
					<text class="driverInfo">油费:</text>
					<text class="youprice">{{youprice}}</text><br>
					<text class="driverInfo">亏吨扣费:</text>
					<text class="youprice">{{youprice}}</text><br>
					<text class="driverInfo1">实际收费:</text>
					<text class="price2">{{youprice}}<text>/元</text></text>
					<text class="beizhu2">对账单有疑问,请联系客服 400-016-5618</text>
				</uni-card>



			</view>
		</view>
	</template>

	<script>
		export default {
			data() {
				return {
					waiturl: '../../../static/purseimg/已卸车.png',
					gotourl: '../../../static/purseimg/load.png',
					loadurl: '../../../static/purseimg/load.png',
					unloadurl: '../../../static/purseimg/load.png',
					dituurl: '../../../static/purseimg/导航标.png',
					price: 35.01,
					youprice: 0.00,
				}

			},


			methods: {

			}
		}
	</script>

	<style>
		.driverInfo {
			display: inline-block;
			font-size: 14px;
			margin: 5px 0px;
			color: #5d5d5d;
			font-weight: 500px;
		}

		.driverInfo1 {
			display: inline-block;
			font-size: 18px;
			margin-left: 180px;
			color: #5d5d5d;
			font-weight: 500px;
		}

		.waitImg {
			width: 50px;
			height: 50px;
		}

		.title {
			display: inline-block;
			font-size: 22px;
			font-weight: bold;
			margin-left: 15px;
			color: #f16c06;
			position: absolute;
			top: 20px;
		}

		.line {
			height: 10px;
			margin-bottom: 10px;
			border-bottom: 1px solid #d3d3d3;
		}

		.selectInfo {
			float: right;
			display: inline-block;
		}

		.titleleft {
			font-size: 16px;
			font-weight: bold;
		}

		.titleright {
			position: relative;
			float: right;
			display: inline-block;
		}

		.righttitle {
			line-height: 25px;
			font-size: 12px;
			color: #1296db;
			float: right;
		}

		.righttitle1 {
			line-height: 25px;
			font-size: 12px;
			color: #7c7c7c;
			float: right;
		}

		.gotoImg {
			margin-top: 5px;
			width: 15px;
			height: 15px;
		}

		.load-car-img {
			width: 25px;
			height: 25px;
			float: left;
			margin: 5px;
		}

		.load-car {
			margin: 20px 0px 15px 0px
		}

		.load-title {
			width: 400rpx;
			font-size: 16px;
			font-weight: bold;
			/*第一步： 溢出隐藏 */
			overflow: hidden;
			/* 第二步：让文本不会换行， 在同一行继续 */
			white-space: nowrap;
			/* 第三步：用省略号来代表未显示完的文本 */
			text-overflow: ellipsis;
		}

		.load-text {
			color: #878787;
			/*第一步： 溢出隐藏 */
			overflow: hidden;
			/* 第二步：让文本不会换行， 在同一行继续 */
			/* white-space: nowrap; */
			/* 第三步：用省略号来代表未显示完的文本 */
			text-overflow: ellipsis;
		}

		.dituImg {
			display: inline-block;
			width: 20px;
			height: 20px;
			float: right;
		}

		.price {
			color: #f73900;
			font-size: 16px;
			float: right;
		}

		.price1 {
			color: #0000ff;
			font-size: 16px;
			float: right;
		}

		.price2 {
			color: #f73900;
			font-size: 18px;
			float: right;
		}

		.youprice {
			font-size: 16px;
			float: right;
		}


		.beizhu {
			display: block;
			font-size: 13px;
			margin: 5px 0px;
			color: #a7a7a7;
		}

		.beizhu2 {
			display: block;
			font-size: 13px;
			margin-top: 10px;
			margin-left: 73px;
			color: #0074aa;
			/* 第二步：让文本不会换行， 在同一行继续 */
			white-space: nowrap;
		}

		/* 步骤条 */
		.pd-top10 {
			padding-top: 10px;
		}

		.stepRight {
			height: 100%;
			margin-left: 20rpx;
		}

		.borde1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-left: 5%;
			height: 35px;
			background-color: #e3e3e3;
			border-radius: 10px;
		}

		.text {
			position: relative;
			left: -3%;
			font-size: 12px;
			color: #6d6d6d;
			padding: 20px;

		}

		.text1 {
			position: relative;
			left: 5%;
			font-size: 16px;
			color: #0055ff;
			padding: 5px;

		}

		.text2 {
			position: relative;

			font-size: 14px;
			color: #55aaff;
			padding: 5px;

		}

		.carsize {
			border-radius: 10px;
			border: 1px solid #f0f0f0;
			width: 100px;
			height: 85px;
			margin-top: 1%;
			margin-left: 5%;
		}

		.carsize1 {
			position: absolute;
			border-radius: 10px;
			background-color: #0000ff;
			width: 20px;
			height: 20px;

		}


		.abcd {
			border-left: 1px solid #9f9f9f;
		}


		.line {
			height: 100%;
			background-color: #bf0000;
			width: 1px;
			z-index: -1;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(0%, 0%);
		}
	</style>